<template>
    <el-container id="aaa" class="Bigcontent">
      

    <el-aside>
        <a class="box" href="#">
            <div class="imgBOX">
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        <img :src="user.userLogo" alt="">
                        <img class="el-icon--right" :src="onlineStatus">
                    </span>
                    <el-dropdown-menu slot="dropdown" id='dropDown'>
                        <el-dropdown-item v-for='(item,index) in onlineStatusList' :command='item' :key='index'>
                            <img class="dropDown" :src='item.img'>
                            <p v-text="item.status"></p>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div class="mainContent">
                <h3 v-text="user.userName"></h3>
                <p v-text="user.userId"></p>
            </div>
        </a>

        <el-tabs class="CurrentSession" v-model="conversationSelected" @tab-click="leftTabClick">
            <el-tab-pane label="当前会话" name="current">
                <div class="contentSecond" @click='closeEmoji'>
                    <ul class='scrollbar'>
                        <!-- 在线人数 -->
                        <li>
                            <a id="online" class="sum" href="#" name="onlineSub">
                                在线 <span></span>
                                <img id="imgBottom" src="../assets/icon/bottom.png" alt="">
                            </a>

                            <ul id="onlineSub" class="subList">
                                <li v-for='(item,index) in currentConversation' v-if="item.online"
                                    :key="index">
                                    <a href="#" class="personItem" @click="open(item,'current')"
                                    :class='{active:currentUserId===item.userId}'>
                                        <div class="itemBOX">
                                            <img :src='item.userLogo' alt="">
                                        </div>
                                        <div class="personality">
                                            <h3 v-text="item.userName"></h3>
                                            <p>
                                                <!-- <span v-if='!item.unread'>已读</span> -->
                                                <span class='Unread' v-show='item.unread'>未读</span>
                                                <span v-if="item.type.value === 'txt' || item.type.value === 'chat' || item.type.value === 'event'" v-html='emoji(item.signature)'></span>
                                                <span v-if="item.type.value === 'image'">
                                                    <img :src="item.signature">
                                                </span>
                                                <span v-if="item.type.value === 'video'">
                                                     <video  :src="item.signature" controls="controls"></video>
                                                </span>
                                                <span  v-if="item.type.value === 'audio'">
                                                     <audio :src="item.signature" controls="controls"></audio>
                                                </span>
                                               
                                               
                                            </p>
                                            <!--显示新消息的状态-->
                                            <i v-show="item.unread"></i>
                                        </div>
                                    </a>


                                    <i class='setTop' @click='hasSetTop(index)'></i>
                                    <i class='closePerson' @click='closeDialog(item,index)'></i>
                                </li>
                            </ul>
                        </li>
                        <!-- 离线人数 -->
                        <li>
                            <a id="offline" class="sum" href="#" name="offlineSub">
                                离线<span></span>
                                <img id="imgBottom2" src="../assets/icon/bottom.png" alt="">
                            </a>
                            <ul id="offlineSub" class="subList">
                                <li v-for='(item,index) in currentConversation' v-if="!item.online"
                                    :key="index">
                                    <a href="#" class="personItem" @click="open(item)"
                                    :class='{active:currentUserId === item.userId}'>
                                        <div class="itemBOX">
                                            <img :src='item.userLogo' alt="">
                                        </div>
                                        <div class="personality">
                                            <h3 v-text="item.userName"></h3>
                                            <p>
                                                <span class='Unread' v-if='item.unread'>未读</span>
                                                <span v-if="item.type.value === 'txt'|| item.type.value === 'chat' || item.type.value === 'event'" v-html='emoji(item.signature)'></span>
                                                <span v-if="item.type.value === 'image'">
                                                    <img :src="item.signature" alt="">
                                                </span>
                                                <span v-if="item.type.value === 'video'">
                                                     <video  :src="item.signature" controls="controls"></video>
                                                </span>
                                                <span  v-if="item.type.value === 'audio'">
                                                     <audio :src="item.signature" controls="controls"></audio>
                                                </span>
                                            </p>
                                            <!--显示新消息的状态-->
                                            <i v-if="item.unread"></i>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>

            <el-tab-pane label="邀请会话" name="waiting">
                <div class="content scrollbar" @click='closeEmoji'>
                    <a href="#" :class='{active:currentUserId === item.userId}' class="personItem"
                    v-for='(item,index) in waitingConversation' :key='index'>
                        <div class="itemBOX">
                            <img :src="item.userLogo" alt="">
                        </div>
                        <div class="personality">
                            <h3 v-text="item.userName"></h3>
                            <p>
                                <span v-if='item.unread'>未读</span>
                                <span v-html='emoji(item.signature)'></span>
                            </p>
                        </div>
                        <a href="javascript:void(0);" @click='takeToJoin(item, index)'>邀请</a>
                    </a>
                </div>
            </el-tab-pane>

            <el-tab-pane label="历史会话" name="history">
                <div class="content histroy scrollbar">
                    <a href="#" @click="open(item,'history')"
                    :class='{active:currentUserId === item.userId}'
                    v-for='(item,index) in historyConversation'
                    class="personItem" :key='index'>

                        <div class="itemBOX">
                            <img :src='item.userLogo' alt="">
                        </div>
                        <div class="personality">
                            <h3 v-text="item.userName"></h3>
                            <p>
                                <span v-if='item.unread'>未读</span>
                                <span v-html='emoji(item.signature)'></span>
                            </p>
                        </div>
                    </a>
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-aside>


        <!--聊天内容和输入框-->
        <el-main>
            <contentMain ref="contentMain"></contentMain>
        </el-main>



    <el-aside  width='400px'>
        <el-tabs v-model="rightTabSelected" @tab-click='handleClick'>
            <el-tab-pane label="客户资料" name="customerInfo">
                <userInfor ref='userInfor'></userInfor>
            </el-tab-pane>
            <el-tab-pane label="快捷回复" name="fastQA">
                <quicky ref='quicky'></quicky>
            </el-tab-pane>
            <el-tab-pane label="智能回复" name="smartQA">
                <Inteligent></Inteligent>
            </el-tab-pane>
            <el-tab-pane label="历史记录" name="chatHistory">
                <histrory ref='histrory'></histrory>
            </el-tab-pane>
        </el-tabs>
    </el-aside>
    
        <el-dialog
                title="结束对话"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>请确认顾客的问题已经解答，是否结束对话？</span>
            <el-form>
                <el-form-item label="会话小结" prop="Conversational">
                    <el-input type="textarea" v-model="Conversational" placeholder='总结一下'
                              auto-complete="off"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitTextarea">确 定</el-button>
            </span>
        </el-dialog>
        <audio id='audio01' :src="audioSrc"></audio>
        <!-- <audio id="audio" src="waring.wav" preload="auto" controls loop></audio> -->

    </el-container>


</template>

<script>
import userApi from "../libs/userInfor";
import userInfor from "./rightBox/userInfor"; //客户资料
import quicky from "./rightBox/quicky"; //快捷回复
import Inteligent from "./rightBox/Intelligent"; //智能回复
import histrory from "./rightBox/histrory"; //历史记录
import contentMain from "./centerMain/contentBox"; //聊天窗口
import contentQ from "./contentQ";
import chat from "../libs/chat";
import jquery from "jquery";

export default {
  name: "home",
  data() {
    return {
      user: {
        userId: "",
        userName: "",
        userLogo: ""
      },
      audioSrc: require("../assets/audio/dingdong.wav"),
      dialogVisible: false,
      errorDialog: false,
      audioStatus: true,
      Conversational: "", //会话小结
      cvaId: "",
      userIndex: "",
      onlineStatus: require("../assets/icon/line.gif"), //当前管理员的状态
      onlineStatusLine: "", //当前管理员的状态
      onlineStatusList: [
        //在线状态列表
        {
          img: require("../assets/icon/line.gif"),
          status: "在线",
          statusLine: "online"
        },
        {
          img: require("../assets/icon/busy.gif"),
          status: "忙碌",
          statusLine: "busy"
        },
        {
          img: require("../assets/icon/unline.gif"),
          status: "离线",
          statusLine: "offline"
        }
      ],
      conversationSelected: "current",
      rightTabSelected: "customerInfo",
      currentUserId: "", //当前选中的人数
      currentConversation: [], //当前会话
      waitingConversation: [], //邀请会话
      historyConversation: [], //历史会话,
      titleInit: document.title,
      isShine: true,
      histroryTabItem: "" //右侧存历史记录
    };
  },
  components: {
    userInfor: userInfor,
    quicky: quicky,
    Inteligent: Inteligent,
    histrory: histrory,
    contentMain
  },
  methods: {
    ifNotification(title, message) {
      //this.startAudio();
      _self.$notify.error({
        title: title,
        message: message
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    //置顶
    hasSetTop(index) {
      this.currentConversation.unshift(
        ...this.currentConversation.splice(index, 1)
      );
    },
    //打开当前会话小结
    closeDialog(user, index) {
      // console.log(user);
      this.userIndex = index;
      this.cvaId = user.cvaId;
      // console.log(cvaId, this.cvaId);
      //  console.log(this.cvaId);
      this.dialogVisible = true;
    },
    //自动关闭当前用户
    getCloseMan() {
      let _self = this;

      contentQ.$on("cvaId", cvaId => {
        for (let i = 0; i < _self.currentConversation.length; i++) {
          if (_self.currentConversation[i].cvaId === cvaId) {
            _self.currentConversation.splice(i, 1);
          }
        }
      });
    },
    //自动关闭右侧信息
    getCloseManInfor() {
      contentQ.$on("ifAccess", ifAccess => {
        if (ifAccess === false) {
          this.$refs.userInfor.closeInfor();
        }
      });
    },

    //关闭当前聊天窗口
    getClosecontentMainInfor() {
      contentQ.$on("ifChatBox", ifChatBox => {
        if (ifChatBox === false) {
          this.$refs.contentMain.closeWindow();
        }
      });
    },

    //提交会话小结
    submitTextarea() {
      let _self = this;

      chat.reviewCva(this.cvaId, this.Conversational, function(res) {
        // console.log(res);

        if (res.code === 200) {
          _self.dialogVisible = false;
          contentQ.$emit("cvaId", _self.cvaId); //关闭左侧相关联系人
          contentQ.$emit("showChatBox", false); //关闭当前会话框
          contentQ.$emit("showAccess", false); //关闭右侧信息
          // _self.currentConversation.splice(_self.userIndex, 1);
        } else {
          _self.dialogVisible = true;
          _self.$notify({
            title: "警告",
            message: "会话总结不能为空",
            type: "warning"
          });
        }
      });
    },

    hasStatus() {
      this.onlineStatusLine = chat.my().onlineStatus;

      if (this.onlineStatusLine === "online") {
        this.onlineStatus = require("../assets/icon/line.gif");
      } else if (this.onlineStatusLine === "busy") {
        this.onlineStatus = require("../assets/icon/busy.gif");
      } else if (this.onlineStatusLine === "offline") {
        this.onlineStatus = require("../assets/icon/unline.gif");
      }
    },

    //改变客服在线状态
    handleCommand(command) {
      // console.log(command);
      this.onlineStatus = command.img;
      this.onlineStatusLine = command.statusLine;
      chat.csOnlineStatus(command.statusLine, function(res) {
        // console.log(res);
      });
    },
    //打开会话聊天窗口
    open(user, name) {
      user.unread = false;
      console.log(user);
      this.currentUserId = user.userId;

      // this.$refs.contentMain.setUserInfo(user,name);
      //用户信息
      userApi.getUserInforText(
        this.currentUserId.toString().substring(2),
        res => {
          this.$refs.userInfor.hasUserInfor(
            this.currentUserId.toString().substring(2),
            res
          );
        }
      );
      //历史记录
      chat.history(user.userId, 0, 10, "", "", res => {
        //  console.log(res);
        if (res.code === 200) {
          this.$refs.contentMain.setUserInfo(user, name, res);
          this.$refs.histrory.hasHistroy(this.currentUserId, res);
        }
      });
    },

    handleClick(tab, event) {
      //根据用户ID请求历史记录

      this.histroryTabItem = tab.name;

      if (this.histroryTabItem === "chatHistory") {
        //this.$refs.histrory.hasHistroy(this.currentUserId);
      }

      if (this.histroryTabItem === "customerInfo") {
        // this.$refs.userInfor.hasUserInfor(this.currentUserId);
      }

      if (this.histroryTabItem === "fastQA") {
        this.$refs.quicky.defaultExhibition();
      }
    },
    leftTabClick(tab, event) {
      if (tab.name === "history") {
        chat.historyUsers(1, 20, json => {
          this.historyConversation = [];
          $(json.data).each((idx, item) => {
            this.addHistoryConversation({
              userId: item.user.userId,
              userName: item.user.name,
              userLogo: item.user.logo,
              signature: "",
              online: false
            });
          });
        });
      } else if (tab.name === "waiting") {
        this.loadWaiting();
      }
    },
    //add 当前会话人数的方法
    addCurrentConversation(...cva) {
      let that = this;
      $.each(cva, function(idx, item) {
        that.currentConversation.push(item);
        // console.log(that.currentConversation);
      });
    },

    //add 邀请会话的方法
    addWaitingConversation(...cva) {
      let that = this;
      $.each(cva, function(idx, item) {
        that.waitingConversation.push(item);
      });
    },

    closeEmoji() {
      this.$refs.contentMain.closeEmoji();
    },
    loadWaiting() {
      chat.takeWaitingCustomers(json => {
        this.waitingConversation = [];
        if (json.data) {
          $(json.data).each((idx, item) => {
            this.addWaitingConversation({
              userId: item.user.userId,
              userName: item.user.name,
              userLogo: item.user.logo,
              signature:
                "等待" +
                (Date.parse(new Date()) / 1000 -
                  parseInt(item.startWaitingTime)) +
                "秒",
              active: false,
              unread: false,
              online: true //在线的状态
            });
          });
        }
      });
    },
    //add 历史会话的方法
    addHistoryConversation(...cva) {
      let that = this;
      $.each(cva, function(idx, item) {
        that.historyConversation.push(item);
      });
    },

    //邀请会话下的接入
    takeToJoin(item, index) {
      this.$alert("是否确认接入？", {
        confirmButtonText: "确定",
        callback: action => {
          chat.takeCustomer(item.userId, json => {
            this.waitingConversation.splice(index, 1);
            this.$notify({
              title: "接入提示",
              message: json.status ? "接入成功" : json.message
            });
          });
        }
      });
    },
    conversationCovert(msg, online) {
      var msgData = {
        cvaId: msg.cvaId,
        userId: msg.fromUser.userId,
        userName: msg.fromUser.name,
        userLogo: msg.fromUser.logo,
        signature: msg.content,
        greetingType:msg.fromUser.greetingType.value,
        type: {
          value: msg.type.value
        },
        active: false,
        unread: true,
        online: online
      };
      return msgData;
      

    },
    indexOfCurrentConversation(userId) {
      let index = -1;
      $.each(this.currentConversation, function(idx, item) {
        if (String(item.userId) === String(userId)) {
          index = idx;
          return false;
        }
      });
      return index;
    },
    indexOfWaitingConversation(userId) {
      let index = -1;
      $.each(this.waitingConversation, function(idx, item) {
        if (String(item.userId) === String(userId)) {
          index = idx;
          return false;
        }
      });
      return index;
    },
    indexOfHistoryConversation(userId) {
      let index = -1;
      $.each(this.historyConversation, function(idx, item) {
        if (String(item.userId) === String(userId)) {
          index = idx;
          return false;
        }
      });
      return index;
    },
    handleEventMessage(msg) {
      let currentIdx = this.indexOfCurrentConversation(msg.from);
      console.log(currentIdx);
      switch (msg.event.value) {
        case "none":
          break;
        case "compose":
          break;
        case "received":
          break;
        case "human":
          if (-1 === currentIdx) {
            console.log(msg);
            this.addCurrentConversation({
              cvaId: msg.cvaId,
              userId: msg.fromUser.userId,
              userName: msg.fromUser.name,
              userLogo: msg.fromUser.logo,
              greetingType:msg.fromUser.greetingType.value,
              signature: msg.content,
              type: {
                value: msg.type.value
              },
              active: true,
              unread: true,
              online: true //在线的状态
            });
            this.startAudio();
          } else {
            this.startAudio();
            this.currentConversation[currentIdx].online = true;
            this.currentConversation[currentIdx].unread = true;
            this.currentConversation[currentIdx].type = msg.type.value;
            this.currentConversation[currentIdx].signature = msg.content;
          }
          break;
        case "redirect":
          break;
        case "online":
          if (currentIdx !== -1)
            this.currentConversation[currentIdx].online = true;
          break;
        case "offline":
          if (currentIdx !== -1)
            this.currentConversation[currentIdx].online = false;
          break;
        case "leave":
          break;
        case "busy":
          break;
        case "send":
          break;
        case "history":
          break;
        case "illegal":
          break;
        case "newWaiting":
          this.loadWaiting();
          break;
        case "notify":
          this.ifNotification("通知", msg.content);
          break;
      }
    },
    handleChatMessage(msg) {
      let has = false;
      let existsIdx = 0;
      $.each(this.currentConversation, function(idx, item) {
        if (String(item.userId) === String(msg.from)) {
          has = true;
          existsIdx = idx;
          console.log(item, idx);
          return false;
        }
      });
      console.log(msg);
      if (!has) {
        let cva = this.conversationCovert(msg,true);
        this.addCurrentConversation(cva);
      } else {
        if (this.currentUserId !== this.currentConversation[existsIdx].userId) {
          this.currentConversation[existsIdx].unread = true;
          this.currentConversation[existsIdx].type.value = msg.type.value;
        }
        this.startAudio();
        this.currentConversation[existsIdx].signature = msg.content;
      }
    },
    startAudio() {
      let audio = document.getElementById("audio01");

      let receiving = localStorage.getItem("receiving");

      if (receiving === "2") {
        this.audioStatus = false;
      } else {
        this.audioStatus = true;
        audio.play();
      }

      if (this.audioStatus) {
        audio.play();
      }
    }
  },

  created() {
    this.getCloseMan();
    this.getCloseManInfor();
    this.getClosecontentMainInfor();
  },

  mounted() {
    let that = this;
    console.log(this.currentConversation);

    chat.addMessageListener(event => {
      let data = JSON.parse(event.data);

      console.log(data);
      if (data.type.value === "event") {
        that.handleEventMessage(data);
      } else {
        that.handleChatMessage(data);
      }
    });

    let receiving = localStorage.getItem("receiving");

    if (receiving === "2") {
      this.audioStatus = false;
    } else {
      this.audioStatus = true;
    }
    chat.addSocketOpenListener(event => {
      that.user = chat.my();
    });

    chat.addValidateListener(json => {
      if (json.receptions) {
        $(json.receptions).each((idx, item) => {
          console.log(item);
          this.addCurrentConversation({
            cvaId: item.cvaId,
            userId: item.user.userId,
            userName: item.user.name,
            userLogo: item.user.logo,
            greetingType:item.fromUser.greetingType.value,
            type: {
              value: "chat"
            },
            signature: "...",
            active: false,
            unread: false,
            online: item.online //在线的状态
          });
        });
      }

      this.hasStatus();
    });
    this.loadWaiting();

    //在线人数
    $("#online").click(function(e) {
      e.preventDefault();
      $("#onlineSub").toggleClass("if");
      $("#imgBottom").toggleClass("rotate");
    });

    //  离线人数
    $("#offline").click(function(e) {
      e.preventDefault();
      $("#offlineSub").toggleClass("if");
      $("#imgBottom2").toggleClass("rotate");
    });

    setTimeout(function() {
      $("#online").trigger("click");
      $("#offline").trigger("click");
    }, 1000);

    //设置高度为自适应
    var height = $(window).height();
    $(".contentSecond").css("height", height - 253);
    $(".content").css("height", height - 253);
    $(window).resize(() => {
      height = $(window).height();
      $(".contentSecond").css("height", height - 253);
      $(".content").css("height", height - 253);
    });

    //当前会话的关闭显示
    $("#onlineSub").on("hover", ".personItem", function() {
      // console.log($(this));
      $(this)
        .parent()
        .siblings()
        .children(".closePerson")
        .css("visibility", "hidden");
      $(this)
        .siblings(".closePerson")
        .css("visibility", "visible");
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
html,
body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.active {
  background: #f7f7f7;
}

.vue-directive-image-previewer {
  .wrapper {
    z-index: 100;
  }
}

.vue-directive-image-previewer .vue-directive-image-previewer-pic {
  z-index: 110;
}

.in-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  & .el-tabs__item.is-active {
    color: #62bad9;
  }
  & .el-aside .el-tabs__nav-scroll {
    padding: 0 20px;
  }
  & .el-tabs__active-bar {
    background-color: #62bad9;
  }
  & .el-row {
    padding: 0.4rem 0;
    background: #62bad8;
  }
}

.in-container .el-tabs__item:hover {
  color: #62bad9;
}

.el-dropdown-link{
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #333;
}
ul {
  margin: 0;
  padding: 0;
}

.cacelTop {
  font-size: 0.4rem;
  position: absolute;
  top: 0.3rem;
  right: 2rem;
  display: none;
  color: #aaa;
}

.setTop {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url("../assets/top.png") center center no-repeat;
  background-size: 0.7rem;
  position: absolute;
  top: 0.3rem;
  right: 2rem;
}

.closePerson {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url("../assets/icon/close.png") center center no-repeat;
  background-size: 0.7rem;
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  // visibility: hidden;
}

.subList {
  height: 0;
  overflow: hidden;
  position: relative;
  transition: all linear 0.3s;
}

.contentSecond > ul,
.content {
  height: 100%;
  overflow-y: auto;
}

.contentSecond > ul::-webkit-scrollbar,
.content::-webkit-scrollbar {
  width: 2px;
  display: none;
}

.contentSecond .scrollbar::-webkit-scrollbar {
  width: 2px;
}

.contentSecond .scrollbar::-webkit-scrollbar-track-piece {
  background-color: #fff;
}

/* 滚动条的内层滑轨背景颜色 */

.contentSecond .scrollbar::-webkit-scrollbar-track {
  background-color: #fff;
}

/* 滚动条的外层滑轨背景颜色 */

.contentSecond .scrollbar::-webkit-scrollbar-thumb {
  background-color: #d4d8e2;
}

/* 滚动条的内层滑块颜色 */

.contentSecond .scrollbar::-webkit-scrollbar-button {
  background-color: #fff;
  display: none;
}

/* 滑轨两头的监听按钮颜色 */

ul li {
  list-style-type: none;
  position: relative;
}

.personItem {
  display: flex;
  padding: 0.7rem 1.4rem;
  position: relative;
}

.personality p span:last-child p {
  margin: 0;
}

.personality p span:last-child p img {
  height: 1rem;
}

.personItem .itemBOX {
  width: 2.5rem;
  height: 2.5rem;
}

.personItem .personality {
  padding-left: 1rem;
  width: 79%;
  position: relative;
}

.personItem .personality p {
  margin: 0.2rem 0;
  text-align: left;
  font-size: 0.76rem;
  color: #aaa;
  display: flex;
}

.personItem .personality p .Unread{
  color: #62bad8;
  margin-right: 0.4rem;
}

.personItem .personality p span:nth-child(2) {
  width: 154px;
  height: 1rem;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  color: #b5b1b1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personItem .personality p span:nth-child(2) a {
  display: none;
}

.personItem .personality p span:nth-child(2) audio,
.personItem .personality p span:nth-child(2) video,
.personItem .personality p span:nth-child(3) img {
  width: 1rem;
}

.personItem .personality p span:last-child img {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

.personItem .personality p span:last-child a {
  display: none;
}

.content a:hover {
  color: #333;
  background: rgba(191, 191, 191, 0.09);
}

.personItem h3 {
  font-weight: 400;
  margin: 0;
  line-height: 1.3rem;
  font-size: 0.84rem;
  text-align: left;
}

.personItem a {
  width: 2rem;
  height: 1rem;
  position: absolute;
  right: 2rem;
  display: block;
  top: 1.4rem;
  font-size: 12px;
}

.personItem a img {
  width: 100%;
  height: 100%;
}

.itemBOX img {
  width: 100%;
  // height: 100%;
  border-radius: 50%;
}

.box {
  display: flex;
  padding: 2rem;
  cursor: default;
  text-decoration: none;
  border-bottom: 1px solid #e6e7ee;
  color: #333;
}

.Bigcontent {
  // height: 60rem;
  border-bottom: 1px solid #e6e7ee;
}

.box .imgBOX {
  width: 3rem;
  height: 3rem;
}

.el-main {
  padding: 0;
}

.box .imgBOX img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.mainContent {
  width: 37%;
  margin-left: 1.5rem;
}

.mainContent h3 {
  margin: 0.3rem 0;
  text-align: left;
  font-weight: 400;
  width: 154px;
  height: 16px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  /* color: #cacaca; */
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mainContent p {
  margin: 0.7rem 0;
  font-size: 0.7rem;
  text-align: left;
}

.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 100%;
}

.el-main {
  background-color: #fff;
  color: #333;
  border-left: 1px solid #e5e7ee;
  border-right: 1px solid #e5e7ee;
}

.if {
  height: 100%;
  transition: all linear 0.3s;
}

.rotate {
  transform: rotate(180deg);
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}

a {
  color: #333;
  text-decoration: none;
}

.contentSecond .personItem {
  display: flex;
  padding: 0.7rem 1.4rem;
}

.contentSecond .active {
  background: #f0f4f5;
}

contentSecond .personItem .itemBOX {
  width: 2rem;
  height: 2rem;
}

.contentSecond .personItem h3 {
  font-weight: 400;
  margin: 0;
  line-height: 1.3rem;
  font-size: 0.84rem;
  text-align: left;
}

.contentSecond .personItem:hover {
  background: #c4eaf9;
}

.contentSecond .itemBOX img {
  width: 100%;
  // height: 100%;
  border-radius: 50%;
  transition: all linear 0.3s;
  transform: rotate(0deg);
}

.contentSecond .sum {
  display: inline-block;
  width: 87%;
  text-align: left;
  padding: 1rem 0 1rem 0;
  position: relative;
  font-size: 12px;
}

.contentSecond .sum span {
  font-size: 0.5rem;
  margin-left: 0.4rem;
}

.contentSecond .sum img {
  position: absolute;
  width: 1.2rem;
  right: 0.8rem;
}

.personItem i {
  display: flex;
  width: 0.7rem;
  height: 0.7rem;
  background: #ef3d3d;
  border-radius: 50%;
  position: absolute;
  left: -0.6rem;
  top: 0;
}

#offlineSub li a img,
.histroy .personItem .itemBOX img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.box .imgBOX .el-icon--right {
  display: block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: -0.2rem;
  top: 2.2rem;
}

.el-dropdown-menu__item {
  display: flex;
}

.dropDown {
  width: 1rem;
  height: 1rem;
  display: block;
  margin: 0.6rem 0.2rem;
}

.dropDown img {
  width: 100%;
  height: 100%;
}

// .online{
//     background: url('') left center no-repeat;
// }

// .busy{
//         background: url('../assets/newChat.gif') 50% center no-repeat;
// }
// .Unline{
//         background: url('../assets/newChat.gif') 100% center no-repeat;
// }

.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
  color: #62bad9;
}
</style>
